<!DOCTYPE html>
<html lang="zh-CN" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <title>项目总收益图表展示</title>
    <link rel="stylesheet" href="/css/xark/style.css">
    <link rel="stylesheet" href="/css/styles.css">
</head>
<body>
<div class="grey_bg_outside_box">
    <a href="/totalRevenue">
        <button type="button" class="btn btn-primary">
            <i class="fa fa-align-center"></i> &nbsp; 更新项目总收益
        </button>
    </a>
    <div class="main_content_box">

        <div class="legal_entity_status height-auto mt20">
            <div class="legal_entity_status_chart whole_box">
                <div class="chart_content_tip">
                    <span class="fl mr20">项目收益展示</span>
                    <span class="pos-rel flex-1"><i class="icon-mark"></i>
                    <span class="tips-mark new2"></span></span>
                    <select class="chooseQuarter" id="chooseQuarter3">
                        <option value="">2020年</option>
                    </select>
                    <!--  <select class="chooseWeek" id="chooseWeek3">
                          <option value="">所有星期</option>
                      </select>-->

                </div>

                <div class="col-lg-6 white_shd">
                    <div id="testCharts2" style="width: 1030px;height:400px;"></div>
                </div>
                <!--                <div class="status_chart_container h410" id="main"></div>-->

                <!--                <div class="col-lg-6 white_shd">-->
                <!--                    <div id="testCharts" style="width: 550px;height:400px;"></div>-->
                <!--                </div>-->

            </div>
        </div>

        <div class="legal_entity_status height-auto mt20">
            <div class="legal_entity_status_chart whole_box">
                <div class="chart_content_tip">
                    <span class="fl mr20">项目总收益图表展示</span>
                    <span class="pos-rel flex-1"><i class="icon-mark"></i>
                    <span class="tips-mark new2">统计了项目总收益情况。</span></span>
                    <select class="chooseQuarter" id="chooseQuarter4">
                        <option value="">2020年</option>
                    </select>
                    <!-- <select class="chooseWeek" id="chooseWeek4">
                         <option value="">所有星期</option>
                     </select>-->
                </div>

                <div class="col-lg-6 white_shd">
                    <div id="testCharts" style="width: 1030px;height:400px;"></div>
                </div>

            </div>
        </div>

    </div>
</div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4/dist/echarts.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl@1/dist/echarts-gl.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat@1/dist/ecStat.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4/dist/extension/dataTool.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4/map/js/china.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4/map/js/world.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4/dist/extension/bmap.min.js"></script>

<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('testCharts'));

    option = {
        color: ['#47c5e5'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: [
            {
                type: 'category',
                data: ['项目1', '项目2', '项目3', '项目4', '项目5'],
                axisTick: {
                    alignWithLabel: true
                }
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: '项目总收益',
                type: 'bar',
                barWidth: '40%',
                data: [200000, 80000, 120000, 150000, 130000]
            }
        ]
    };
    myChart.setOption(option);

    var myChart2 = echarts.init(document.getElementById('testCharts2'));
    var weatherIcons = {
    };

    var option2 = {
        title: {
            text: '项目总收益统计',
            left: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
            // orient: 'vertical',
            // top: 'middle',
            bottom: 10,
            left: 'center',
            data: ['项目1', '项目2', '项目3', '项目4', '项目5']
        },toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        series: [
            {
                type: 'pie',
                radius: '65%',
                center: ['50%', '50%'],
                selectedMode: 'single',
                data: [
                    {
                        value: 200000,
                        name: '项目1',
                        itemStyle: {
                            color: '#1cb1d5'
                        },
                        label: {
                            formatter: [
                                '{title|{b}}{abg|}',
                                '  {valueHead|总收入}{rateHead|占比}',
                                '{hr|}',
                                '  {value|200000}{rate|29.41%}'
                            ].join('\n'),
                            backgroundColor: '#eee',
                            borderColor: '#777777',
                            borderWidth: 1,
                            borderRadius: 4,
                            rich: {
                                title: {
                                    color: '#eee',
                                    align: 'center'
                                },
                                abg: {
                                    backgroundColor: '#333',
                                    width: '100%',
                                    align: 'right',
                                    height: 25,
                                    borderRadius: [4, 4, 0, 0]
                                },
                                Sunny: {
                                    height: 30,
                                    align: 'left',
                                    backgroundColor: {
                                        image: weatherIcons.Sunny
                                    }
                                },
                                Cloudy: {
                                    height: 30,
                                    align: 'left',
                                    backgroundColor: {
                                        image: weatherIcons.Cloudy
                                    }
                                },
                                Showers: {
                                    height: 30,
                                    align: 'left',
                                    backgroundColor: {
                                        image: weatherIcons.Showers
                                    }
                                },
                                weatherHead: {
                                    color: '#ea9869',
                                    height: 24,
                                    align: 'left'
                                },
                                hr: {
                                    borderColor: '#777',
                                    width: '100%',
                                    borderWidth: 0.5,
                                    height: 0
                                },
                                value: {
                                    width: 20,
                                    padding: [0, 20, 0, 30],
                                    align: 'left'
                                },
                                valueHead: {
                                    color: '#333',
                                    width: 20,
                                    padding: [0, 20, 0, 30],
                                    align: 'center'
                                },
                                rate: {
                                    width: 40,
                                    align: 'right',
                                    padding: [0, 10, 0, 0]
                                },
                                rateHead: {
                                    color: '#333',
                                    width: 40,
                                    align: 'center',
                                    padding: [0, 10, 0, 0]
                                }
                            }
                        }
                    },
                    {value: 80000, name: '项目2',itemStyle:{ color: '#8cf1ed'}},
                    {value: 120000, name: '项目3',itemStyle:{ color: '#eede59'}},
                    {value: 150000, name: '项目4',itemStyle:{ color: '#e8a160'}},
                    {value: 130000, name: '项目5',itemStyle:{ color: '#ea7dcb'}}
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgb(151,191,123)'
                    }
                }
            }
        ]
    };
    myChart2.setOption(option2);


    // var myChart = echarts.init(document.getElementById('testCharts3'));
    // setTimeout(function () {
    //
    //     option = {
    //         legend: {},
    //         tooltip: {
    //             trigger: 'axis',
    //             showContent: false
    //         },
    //         dataset: {
    //             source: [
    //                 ['product', '2012', '2013', '2014', '2015', '2016', '2017'],
    //                 ['Matcha Latte', 41.1, 30.4, 65.1, 53.3, 83.8, 98.7],
    //                 ['Milk Tea', 86.5, 92.1, 85.7, 83.1, 73.4, 55.1],
    //                 ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4, 65.2, 82.5],
    //                 ['Walnut Brownie', 55.2, 67.1, 69.2, 72.4, 53.9, 39.1]
    //             ]
    //         },
    //         xAxis: {type: 'category'},
    //         yAxis: {gridIndex: 0},
    //         grid: {top: '55%'},
    //         series: [
    //             {type: 'line', smooth: true, seriesLayoutBy: 'row'},
    //             {type: 'line', smooth: true, seriesLayoutBy: 'row'},
    //             {type: 'line', smooth: true, seriesLayoutBy: 'row'},
    //             {type: 'line', smooth: true, seriesLayoutBy: 'row'},
    //             {
    //                 type: 'pie',
    //                 id: 'pie',
    //                 radius: '30%',
    //                 center: ['50%', '25%'],
    //                 label: {
    //                     formatter: '{b}: {@2012} ({d}%)'
    //                 },
    //                 encode: {
    //                     itemName: 'product',
    //                     value: '2012',
    //                     tooltip: '2012'
    //                 }
    //             }
    //         ]
    //     };
    //
    //     myChart.on('updateAxisPointer', function (event) {
    //         var xAxisInfo = event.axesInfo[0];
    //         if (xAxisInfo) {
    //             var dimension = xAxisInfo.value + 1;
    //             myChart.setOption({
    //                 series: {
    //                     id: 'pie',
    //                     label: {
    //                         formatter: '{b}: {@[' + dimension + ']} ({d}%)'
    //                     },
    //                     encode: {
    //                         value: dimension,
    //                         tooltip: dimension
    //                     }
    //                 }
    //             });
    //         }
    //     });
    //
    //     myChart.setOption(option);
    //
    // });
</script>

</body>
</html>
